<template>
  <div class="content">
    <div class="detail-left">
      <div class="tipsImg">
        <img src="img/1.png" alt="">
      </div>
      <div class="menu">
        <ul>
          <li v-for="menu in list" :key="menu.id">
            <router-link :to="menu.path">{{ menu.title }}</router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="detail-right">
      <div class="hd">
        <h3>移动互联网开发全套书籍</h3>
      </div>
      <div class="tips">
        <p>突破传统教与学，合理利用碎片化学习时间。在线课堂、视频课堂，论坛交流，提供课外知识补充。</p>
      </div>
      <div class="select-menus">
        <div class="form-item book-name">
          <label>书籍名称：</label>
          <button>Web标准网站设计之道</button>
        </div>
        <div class="form-item count">
          <label>购买数量：</label>
          <button>-</button><input type="text" value="1"><button>+</button>
        </div>
        <div class="form-item">
          <label>适用校区：</label>
          <select>
            <option value="" disabled>请选择所在校区</option>
            <option value="武汉校区">武汉校区</option>
            <option value="信阳校区">信阳校区</option>
            <option value="开封校区">开封校区</option>
            <option value="三门峡校区">三门峡校区</option>
          </select>
        </div>
        <div class="form-item">
          <label>总价：</label>
          <span>111元</span>
        </div>
        <div class="form-item btn">
          <input type="button" value="立即购买" />
        </div>
      </div>

      <div class="illustrate">
        <div class="hd">
          <h3>书籍简介</h3>
        </div>
        <div class="describe">
          <p>
            高端专业独享教材：解决学生课堂知识理解及教师教学配套。教材所有内容都是以一个综合项目为目标，每学期的课程内容都是围绕综合项目开展的，同时内含丰富的课程资源及面试题库等企业必备信息库。编撰者均有相关专业多年授课及行业经验，且多为获得相关专业顶级认证的专业人士。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import goods from '../../assets/data'

export default {
  name: 'BookstoreDevelop',

  data() {
    return {
      list: [1, 2, 3, 4]
    };
  },

  created() {
    this.list = [...goods];
  },

  methods: {

  },
};
</script>

<style  scoped>

</style>
